<!DOCTYPE html>
<html lang="zh-CN" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head th:include="/common/inc::header"/>
<body>
<div id="clipArea"></div>
<div style="width: 100%;text-align: center; margin-top: 10px">
    <a id="" class="" onclick="upfile()" style="width: 258px;" href="#"
       group="">
    <span class="l-btn-left" style="margin-top: 0px;">
    <span class="l-btn-text">选取照片</span>
    </span>
    </a>
</div>
<button id="clipBtn">截取</button>
<input id="fileImage" type="file" style="display:none"
       accept="image/*">
<script th:replace="/common/inc::incJs"></script>
<style>
    #clipArea {
        height: 100%;
        margin: 0px;
    }

    #clipBtn {
        display: none;
    }
</style>
<script>
    var op_type, dialog;
    var config = parent.config;
    var successCallback;
    var type = getQueryString("type");

    function upfile() {
        $("#fileImage").click();
    }

    var formSubmit = function (callback) {
        successCallback = callback;
        $("#clipBtn").click();
    }

    var uploadToken;
    $.post('/backend/security/qiniu/getUptoken', {async: false}, function (res) {
        uploadToken = res.body;

        $("#clipArea").height($(window).height() - 45);
        var clipArea = new bjj.PhotoClip("#clipArea", {
            uploadToken: uploadToken,
            url: config.url,
            file: "#fileImage",
            ok: "#clipBtn",
            strictSize: config.strictSize,
            size: [config.width, config.height], // 截取框的宽和高组成的数组。默认值为[260,260]
            outputSize: [config.widthOutSize, config.heightOutSize],
            onProgress: function () {
            },
            onFailure: function () {
            },
            /* clipFinish: function(dataURL) {
              config.obj.attr("src",dataURL);
              var base64 = dataURL.replace(/^.*?,/, '');
                config.formobj.val(base64);
                dialog.dialog('destroy');
            }, */
            onSuccess: function (dataURL) {
                if (config.type == "single") {
                    if (config.status == null) {
                        config.obj.attr("src", dataURL);
                        config.formobj.val(dataURL);
                    }
                    else if (config.status = 1) {
                        parent.addfun(dataURL);
                    }
                } else if (config.type = "many") {
                    parent.$("#imgDiv").append("<div class=\"layui-input-inline\" id=\"imgDiv" + config.imgNums + "\" style=\"width: 100px;\">\n" +
                        "            <div class=\"image-uploader\" style=\"width: 100px;height:75px\">\n" +
                        "                <div class=\"image-preview\" style=\"width: 100px;height: 75px\">\n" +
                        "                    <div class=\"image\" style=\"width: 100px;height: 75px\">\n" +
                        "                        <img src=\"\" id=\"img" + config.imgNums + "\" style=\"width: 100px;height: 75px\" class=\"img_home_photo\">\n" +
                        "                        <span class=\"image-browse\" style=\"width: 100px\" onclick=\"delFun('imgDiv" + config.imgNums + "')\"><strong>删除图片</strong><span\n" +
                        "                                class=\"progress\"><span class=\"progress-bar\"></span></span></span>\n" +
                        "                    </div>\n" +
                        "                </div>\n" +
                        "            </div>\n" +
                        "        </div>");
                    parent.$("#img" + config.imgNums + "").attr("src",dataURL);
                    parent.imgNum = parent.imgNum + 1;
                }
                successCallback && successCallback();

            }
        });

        $("#clipArea").height($(window).height() - 45);

    });


</script>
</body>
</html>
